<template>
  <div class="app-container">
    <div class="flex">
      <div class="w-400px mr-20px">
        <el-form :inline="true" class="flex">
          <el-form-item>
            <el-input
              v-model="groupName"
              @input="getList"
              clearable
              placeholder="请输入分组名称筛选"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              class="ml-10px"
              type="primary"
              @click="$refs.configDialog.addGroup()"
            >
              添加分组
            </el-button>
          </el-form-item>
        </el-form>

        <el-table
          :data="groupList"
          border
          fit
          stripe
          :height="tableHeight"
          @row-click="handlerRow"
        >
          <el-table-column
            prop="groupName"
            label="分组名称"
            show-overflow-tooltip
          />
          <el-table-column
            prop="groupNo"
            label="分组编码"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            header-align="center"
            label="操作"
            width="60"
          >
            <template slot-scope="{ row }">
              <el-button type="text" size="mini" @click="handlerRow(row)">
                配置
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 右侧配置项 -->
      <div class="flex-1" v-if="configItem">
        <div class="config-title">
          {{ configItem.groupName }}
          <el-button
            class="!ml-10px"
            type="primary"
            @click="$refs.configDialog.addConfig(configItem)"
          >
            新增配置项
          </el-button>
        </div>
        <el-table :data="configList" border fit stripe :height="tableHeight">
          <el-table-column
            prop="title"
            label="配置名"
            width="240"
            show-overflow-tooltip
          />
          <el-table-column
            prop="propName"
            label="配置项key"
            width="160"
            show-overflow-tooltip
          />
          <el-table-column prop="type" label="配置类型" width="100">
            <template slot-scope="scope">
              <template v-if="scope.row.type == 'blob'">文件</template>
              <template v-if="scope.row.type == 'string'">字符串</template>
              <template v-if="scope.row.type == 'img'">图片</template>
            </template>
          </el-table-column>
          <el-table-column
            prop="propValue"
            label="配置项值"
            show-overflow-tooltip
          >
            <template slot-scope="{ row }">
              <PicViewer
                v-if="row.type == 'img'"
                :value="row.propValue"
                tableCell
              />
              <span
                v-else-if="row.type == 'blob'"
                class="el-icon-folder text-30px"
              ></span>
              <template v-else>{{ row.propValue }}</template>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            header-align="center"
            label="操作"
            width="120"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                @click="$refs.configDialog.editConfig(scope.row)"
              >
                编辑
              </el-button>
              <el-button
                @click="deleteConfig(scope.row)"
                type="text"
                size="mini"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-empty
        v-else
        class="flex-1"
        description="请先选择左侧配置项"
      ></el-empty>
    </div>
    <el-button
      class="!mt-20px"
      v-if="getPath == 'sot-config-api/sys-config'"
      @click="$router.push('/login')"
    >
      去登录
    </el-button>

    <addConfig
      ref="configDialog"
      @groupUpdate="getList()"
      @configItemUpdate="getConfigList()"
    />
  </div>
</template>

<script>
import addConfig from './components/add-config.vue'

export default {
  name: 'initConfig',
  components: { addConfig },
  data () {
    return {
      groupList: [],
      configList: [],
      configItem: null,
      tableHeight: 600,
      groupName: '',
      getPath: 'sot-admin-api/sys/config'
    }
  },
  created () {
    this.tableHeight = window.innerHeight - 188
    if (this.$route.path == '/init-config') {
      this.getPath = 'sot-config-api/sys-config'
    }
    this.getList()
  },
  methods: {
    // 获取分组列表
    getList () {
      this.$POST(`${this.getPath}/queryGroup`, {
        groupName: this.groupName
      }).then(res => {
        if (res.errorCode == '00000') {
          this.configItem = null
          this.configList = []
          this.groupList = res.data
        }
      })
    },
    handlerRow (row) {
      this.configItem = row
      this.getConfigList()
    },
    // 获取配置列表
    getConfigList () {
      this.$POST(`${this.getPath}/queryForList`, {
        groupNo: this.configItem.groupNo
      }).then(res => {
        if (res.errorCode == '00000') {
          this.configList = res.data
        }
      })
    },
    // 删除
    deleteConfig (row) {
      this.$prompt(
        `删除后可能会导致不可预知的错误，您确认要删除吗？请输入 <b style="color:#f78989;user-select: none;">${row.title}</b> 确认删除`,
        '重要提示',
        {
          dangerouslyUseHTMLString: true,
          type: 'warning',
          confirmButtonText: '确认删除',
          cancelButtonText: '取消',
          inputPlaceholder: `请输入${row.title}确认删除`,
          confirmButtonClass: 'el-button--danger',
          inputValidator (b) {
            if (!b) {
              return '请输入配置key'
            }
            if (b !== row.title) {
              return '请输入正确的配置key'
            }
            return true
          }
        }
      ).then(({ value }) => {
        this.$POST(`${this.getPath}/delete`, {
          id: row.id
        }).then(res => {
          if (res.errorCode == '00000') {
            this.$swal.success('删除成功')
            if (this.configList.length == 1) {
              this.getList() // 如果只有一条且被删除，重新加载分组列表
            } else {
              this.getConfigList()
            }
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.config-title {
  display: flex;
  align-items: center;
  height: 38px;
  font-weight: bolder;
  box-sizing: content-box;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.8);
}
</style>
